<script lang="ts" setup>
  import { ref } from 'vue';
  import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
  import Menu from '@sscd/menu';
  const current = ref<string[]>(['one']);
</script>

<template>
  <div class="demo">
    <div class="demo-title">顶部导航</div>
    <div class="demo-content">
      <Menu v-model:selectedKeys="current" mode="horizontal">
        <Menu.Item key="one">
          <template #icon>
            <MailOutlined />
          </template>
          Navigation One
        </Menu.Item>
        <Menu.Item key="two" disabled>
          <template #icon>
            <AppstoreOutlined />
          </template>
          Navigation Two
        </Menu.Item>
        <Menu.SubMenu key="three">
          <template #icon>
            <SettingOutlined />
          </template>
          <template #title>Navigation Three - Submenu</template>
          <Menu.ItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </Menu.ItemGroup>
        </Menu.SubMenu>
        <Menu.Item key="four">
          <a href="https://design.ssc-hn.com" target="_blank" rel="noopener noreferrer">
            Navigation Four - Link
          </a>
        </Menu.Item>
      </Menu>
    </div>
  </div>
</template>
